<template>
  <div>
    <!-- 标题栏 -->
    <van-nav-bar
      title="不凡"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
      
    />
    <!-- 懒加载 -->
    <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    :immediate-check="false"
    class="brand-lists"
    >
    <ul>
        <li v-for="item in list" :key="item.id">
            <img :src="item.app_list_pic_url" alt="">
            <div class="info">
                <span>{{item.name}}</span>
                <span>|</span>
                <span>{{item.floor_price}}元起</span>
            </div>
        </li>
    </ul>
    </van-list>
  </div>
</template>
<script>
import { listaction, detailaction } from "@/api/home/brand.js";
export default {
    data(){
        return{
            list:[],
            page:1,
            loading:false,
            finished:false,    
        }
    },
    methods:{
    getBrandList(){
        listaction({
          page:this.page,
      }).then(res=>{
          console.log(res)
          this.list.push(...res.data)
          this.page++;
          if(this.page>res.total){
              this.finished=true;
          }
          this.loading=false
      })
     
    },
    //返回上一个页面
    onClickLeft(){
        this.$router.go(-1);
    },
     onLoad(){
        this.getBrandList()
    }
    },
    created(){
        this.getBrandList()
    }, 
}
</script>
<style lang="scss" scoped>
.brand-lists{
    margin-top: 50px;
    ul{
        width: 100%;
        li{
            position: relative;
            width: 100%;
            height: 210px;
            margin-bottom: 5px;
            img{
                width: 100%;
                height: 100%;
            }
            .info{
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate3d(-50%,-50%,0);
                span{
                   color: #fff;
                    font-size:16px;
                    font-weight:bold; 
                }
            }
        }
    }
}
</style>